<template>
  <el-form
    ref="form-ref"
    :model="headForm"
    :label-position="showMobilePage?'left':'right'"
    label-width="110px"
    class="lineHeight32 dividing">
    <el-row type="flex" class="response-el-row">
      <el-col :span="colSpan" class="responsive-col-lg-8">
        <el-form-item :prop="'supplierSource'" label="供应商来源：" >
          <div>{{ headForm.supplierSource | supplierSourceFilter }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="colSpan" class="responsive-col-lg-8">
        <el-form-item :prop="'channelId'" label="供应商名称：" >
          <div>{{ headForm.channelName || '--' }}</div>
        </el-form-item>
      </el-col>
      <el-col v-if="!isNotOrder" :span="colSpan" class="responsive-col-lg-8">
        <el-form-item prop="costBelong" label="成本来源：" >
          <span class="content">{{ `${supplierCostBelong(stepOneData.costBelong)}${stepOneData.isInvite ? '(协作)' : ''}` }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="colSpan" class="responsive-col-lg-8">
        <el-form-item prop="settlementMethod" label="结算方式：" >
          <span class="content">{{ headForm.settlementMethod | settlementMethodFilter }}</span>
        </el-form-item>
      </el-col>
      <el-col v-if="!isNotOrder" :span="colSpan" class="responsive-col-lg-8">
        <el-form-item prop="isInvite" label="协作方式：" >
          <span class="content">{{ stepOneData.isInvite?'协作':'非协作' }}</span>
        </el-form-item>
      </el-col>
      <el-col v-if="isNotOrder" :span="colSpan" class="responsive-col-lg-8">
        <el-form-item prop="isInvite" label="结算总金额：" >
          <span v-if="headForm.settleAmountTotal || headForm.settleAmountTotal === 0" class="content">{{ headForm.settleAmountTotal | moneyFilter }}元</span>
          <span v-else>--</span>
        </el-form-item>
      </el-col>
      <el-col :span="colSpan" class="responsive-col-lg-8">
        <el-form-item prop="creator" label="创建人：" >
          <span class="content">{{ headForm.creator }}</span>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { mapState } from 'vuex';
// filters
import { supplierCostBelong } from '@/filters/status';
import { moneyFilter } from '@/filters/number';

export default {
  filters: {
    moneyFilter,
    supplierSourceFilter(num) {
      if (!num && num !== 0) return '--';
      if ([0, 1, 5].includes(num)) return '飞博供应商';
      if ([2, 3, 4].includes(num)) return '萌力供应商';
      if ([6].includes(num)) return '有赞供应商';
      return '--';
    },
    settlementMethodFilter(num) {
      if (num === 0) {
        return '多次结算';
      } else if (num === 1) {
        return '一次结算';
      }
      return '--';
    }
  },
  model: {
    prop: 'headForm',
    event: 'changeData'
  },
  props: {
    headForm: {
      type: Object,
      default: () => ({})
    },
    isNotOrder: {
      type: Boolean,
      default: false
    },
    stepOneData: {
      type: Object, // costBelong 成本归属 0:销售成本 2:萌力成本 6:有赞成本
      default: () => ({})
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    colSpan() {
      return this.showMobilePage ? 24 : 12;
    }
  },
  methods: {
    supplierCostBelong
  }
};
</script>

<style lang="scss" scoped>
.lineHeight32 {
  margin-bottom: 20px;
  &::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
    .el-form-item__label {
      color: #999;
      box-sizing: content-box;
    }
    .el-form-item__content {
      color: #333;
    }
  }
}
.dividing{

  @media only screen and (min-width: 1300px) {
    &::v-deep {
      .el-col {
        &:nth-child(3n) {
          .el-form-item__content {
            border-right: none;
          }
        }
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
  }
}
</style>
